<template>
 <div class="app-container">
   <el-row>
     <el-col :span="8">
       <div class="titlebody">
          <div class="titleSty" style="background-color: #d9edf7;border-color: #bce8f1;height: 50px;width: 100%;">
            <span style="color: #31708f;margin-left: 15px">仓库管理树</span>
            <el-button style="margin-left: 15px" type="success" icon="el-icon-plus" size="mini" @click="addCangku">添加仓库</el-button>
            <el-button style="margin-left: 15px" size="mini" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
          </div>
         <div style="margin-left: 15px;padding-bottom: 20px">
           <div class="head-container">
             <el-tree
               :data="deptOptions"
               :props="defaultProps"
               :expand-on-click-node="false"
               :filter-node-method="filterNode"
               ref="tree"
               default-expand-all
               @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>
                      <i :class="data.icon"></i> {{ node.label }}
                  </span>
              </span>
             </el-tree>

           </div>
         </div>
       </div>
     </el-col>
     <el-col :span="16">
       <div class="neirongbody">
         <div class="neirongSty" style="background-color: #dff0d8;border-color: #dff0d8;height: 50px;width:100% ;">
           <span style="color: #3c763d;margin-left: 15px">存放位置信息</span>
           <el-button style="margin-right: 15px" size="mini" type="success" icon="el-icon-refresh" @click="gengxin">更新</el-button>
         </div>
         <div style="padding-bottom: 20px;margin-top: 20px">
           <el-form :model="queryParams" ref="queryForm"  label-width="200px">
             <el-form-item label="上级" >
               <treeselect style="width: 300px;height: 32px" v-model="queryParams.deptId" :options="deptOptions" placeholder="请选择所属部门" />
             </el-form-item>
             <el-form-item label="名称" >
               <el-input
                 style="width: 300px"
                 v-model="queryParams.repositoryName"
                 placeholder="请输入名称"
                 clearable
                 size="small"
               />
             </el-form-item>
             <el-form-item label="所在地" v-show="bumenlx=='repo'">
               <el-input
                 style="width: 300px"
                 v-model="queryParams.location"
                 placeholder="请输入所在地"
                 clearable
                 size="small"
               />
             </el-form-item>
             <el-form-item label="描述" >
               <el-input
                 type="textarea"
                 :rows="2"
                 style="width: 300px"
                 size="small"
                 placeholder="请输入描述"
                 v-model="queryParams.remark">
               </el-input>
             </el-form-item>
           </el-form>

         </div>

       </div>
     </el-col>
   </el-row>
   <el-dialog
     title="添加仓库"
     :visible.sync="dialogVisible"
     width="500px">
     <el-form ref="form" :model="form"  label-width="90px">
       <el-form-item label="上级仓库" >

         <treeselect  style="height: 32px" v-model="form.parentId" :options="deptOptions" placeholder="请输入上级" />
       </el-form-item>
       <el-form-item label="分公司" >
         <el-input v-model="form.deptId" placeholder="请输入设备分类编码" />
       </el-form-item>
       <el-form-item label="名称" >
         <el-input v-model="form.repositoryName" placeholder="请输入设备分类名称" />
       </el-form-item>
       <el-form-item label="所在地" >
         <el-input v-model="form.location" placeholder="请输入设备分类名称" />
       </el-form-item>
       <el-form-item label="描述" >
         <el-input
           type="textarea"
           :rows="2"
           size="small"
           placeholder="请输入描述"
           v-model="form.remark">
         </el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCangkuBtn"  size="small">确 定</el-button>
     </span>
   </el-dialog>


 </div>
</template>

<script>
  import request from '@/utils/request'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "Role",
    components: { Treeselect },
    data() {
      return {
        bumenlx:'',//类型
        form:{
          repositoryName:'',//仓库名称
          deptId:'',//部门id
          location:'',//所在地
          remark:'',//描述
        },
        dialogVisible:false,
        queryParams:{
          parentId:undefined,
          repositoryName:'',
          location:'',
          remark:'',
        },
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
      };
    },
    created() {
      this.getTreeselect()
    },
    methods: {
      //更新
      gengxin:function(){
        request({
          url: '/system/notice',
          method: 'put',
          data: data
        })
      },
      //删除
      delBtn:function(){
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(id){
        request({
          url: '/device/partsRepository/' + id,
          method: 'delete'
        }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      },
      //添加仓库
      addCangku:function(){
        this.dialogVisible = true

      },
      //添加仓库确定
      addCangkuBtn:function(){

        request({
          url: '/device/partsRepository',
          method: 'post',
          data:this.form
        }).then(response => {
          this.dialogVisible = false
          console.log('成功添加')
        });

      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        request({
          url: '/device/partsRepository/treeWithDept',
          method: 'get',
        }).then(response => {

          this.deptOptions = response.data;
          console.log('成功',response)
        });

      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log('单击事件',data)
        this.bumenlx = data.tpye
        this.getList(data.id);
      },
      //查询详细信息
      getList:function (id) {
        request({
          url: '/device/partsRepository/'+id,
          method: 'get',
        }).then(response => {
          console.log('获取信息',response)
          this.form.deptId =106

          // this.form.repositoryName = response.data.repositoryName//仓库名称
          // this.form.deptId =response.data.deptId//部门id
          // this.form.location = response.data.location//所在地
          // this.form.remark = response.data.remark//描述
          console.log('this.form',this.form)
        });
      },

    }
  };
</script>
<style>
  .titlebody {
    width: 95%;
    border: 1px solid #bce8f1;
  }
  .titleSty {
    display: flex;
    align-items: center;
  }
  .neirongbody {
    width: 60%;
    border: 1px solid #dff0d8;
  }
  .neirongSty {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

